<template>
    <div class="header">
        <div class="header-logo" :style="`width:${logoWidth}px;`">
            <span>
                <img class="header-logo-img" src="@/assets/images/favicon.ico" />
            </span>
            <span :class="`header-logo-text ${'enabled-logo-' + sidebarVisibility}`">{{ appName }}</span>
        </div>
        <div class="header-content">
            <div class="header-content-left">
                <div @click="onSetSidebarVisibility">
                    <el-icon>
                        <Expand v-if="sidebarVisibility === false" />
                        <Fold v-else />
                    </el-icon>
                </div>
                <div @click="onRefresh" style="cursor: pointer;">
                    <div class="el-badge">
                        <el-icon>
                            <RefreshRight />
                        </el-icon>
                    </div>
                </div>
                <div class="header-content-left-br">
                    <el-breadcrumb separator="/" style="padding-top: 4px;">
                        <el-breadcrumb-item :to="{ path: dashboard }">
                            <span class="br-home">主页</span>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item v-for="p in breadcurmbs" :key="p.path">
                            <span class="br-other">{{ p }}</span>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </div>
            <div class="header-content-right">
                <div class="header-content-right-action">
                    <!--预留的功能操作-->
                </div>
                <div class="header-content-right-user">
                    <el-dropdown trigger="click" style="margin-top: 5px" @command="handleCommand">
                        <div style="display: inline-flex">
                            <el-avatar :src="avatarUrl"></el-avatar>
                            <el-text style="margin-left: 5px;color:#ffffff">
                                {{ nickName }}
                                <el-icon>
                                    <ArrowDown />
                                </el-icon>
                            </el-text>

                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item :icon="User" command="/center">个人中心</el-dropdown-item>
                                <el-dropdown-item :icon="SwitchButton" command="/logout">退出登陆</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted, watch } from 'vue';
import router from '@/router/index.js';

import { RefreshRight, Expand, Fold, User, SwitchButton, ArrowDown } from '@element-plus/icons-vue';

import emits from '@/utils/emits';
import appStorage from '@/stores/storage';
import { StorageKey, MittType } from '@/constant';
import { ElMessageBox } from 'element-plus';
import api from '@/apis/api';
import baseUrl from '@/apis/baseUrl';
//变量
const appName = ref('XXX管理系统')
const avatarUrl = ref('')
// const router = useRouter();
const { currentRoute } = router;
const dashboard = ref("/home");

const breadcurmbs = ref([]);
const sidebarVisibility = ref(true);
const logoWidth = ref(230);
const nickName = ref('匿名用户');

//函数
onMounted(() => {
    refreshUserInfo();//刷新用户信息
    refreshBreadcurmbs();
});
watch(
    () => currentRoute.value,
    () => { refreshBreadcurmbs(); }
);
function refreshUserInfo() {
    let user = appStorage.getSession(StorageKey.USER)
    // console.log(`获取用户信息：${JSON.stringify(user)}`)
    if (user != null) {
        nickName.value = user.nickName
        //头像        
        avatarUrl.value = `${baseUrl.avatarUrl}/${user.avatar}?t=${new Date().getTime()}`
    }
}

function refreshBreadcurmbs() {
    let bc = [];
    if (currentRoute.value.meta.parent) {
        bc.push(currentRoute.value.meta.parent);
    }
    bc.push(currentRoute.value.meta.title);
    breadcurmbs.value = bc;
}
emits.on(MittType.UserInfo, (data) => {
    nickName.value = data.nickName
    //头像
    avatarUrl.value = `${baseUrl.avatarUrl}/${data.avatar}?t=${new Date().getTime()}`
})

/**
 * 设置菜单边栏可见性。
 */
function onSetSidebarVisibility() {
    if (sidebarVisibility.value === true) {
        sidebarVisibility.value = false;
        logoWidth.value = 50;
    }
    else if (sidebarVisibility.value === false) {
        sidebarVisibility.value = true;
        logoWidth.value = 230;
    }
    emits.emit(MittType.Switchsidebar, sidebarVisibility.value);
}

/**
 * 刷新当前页
 */
function onRefresh() {
    emits.emit(MittType.RefreshView);
}

/**
 * 点击用户头像菜单
 */
function handleCommand(path) {
    if (path === "/logout") {
        ElMessageBox.confirm("确定要退出登录？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        }).then(() => {
            //调用退出登录接口
            api.user.logout(resp => {
                if (resp.code == 200) {
                    appStorage.clearSession()//清理本地缓存
                    router.push('/login')
                }
                else {
                    ElMessage(resp.msg)
                }
            })

        }).catch(() => {
        });
    }
    else {
        router.push({ path: path });
    }
}
</script>


<style lang="less" scoped>
.header {
    background-color: #263238;
    width: 100%;
    height: 50px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    flex-direction: row;
    justify-content: flex-start;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    color: rgba(255, 255, 255, 0.8);

    &-logo {
        width: 230px;
        height: 50px;
        font-size: 19px;
        font-weight: 500;
        letter-spacing: 1.5px;
        overflow: hidden;
        white-space: nowrap;
        display: flex;
        justify-content: start;
        font-family: '微软雅黑', 'Courier New', Courier, monospace, Arial;
        align-items: center;
        position: relative;
        // transition: width 0.3s;
        padding: 0 15px;

        &-img {
            width: 32px;
            height: 32px;
            display: inline-block;
            flex-shrink: 0;
        }

        &-text {
            display: inline-block;
            line-height: 1;
            overflow: hidden;
            text-transform: uppercase;
            margin-left: 10px;
            font-weight: 700;

            &.enabled-logo {
                &-false {
                    display: none;
                }
            }
        }
    }

    &-content {
        width: 100%;
        display: flex;
        flex-direction: row !important;
        justify-content: space-between;
        overflow: hidden;
        align-items: center;
        border-left: solid 1px rgba(255, 255, 255, 0.2);

        &-left {
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
            align-items: center;
            box-sizing: border-box;

            >div {
                height: 100%;
                height: 50px;
                line-height: 50px;
                cursor: pointer;
                padding: 0 5px 0 15px;
            }

            &-br {
                height: 25px !important;
                line-height: 50px;
                padding: 0 10px !important;
                overflow-x: auto;
                overflow-y: hidden;
                cursor: text !important;

                .br-home {
                    color: #eee;
                    font-weight: 300;
                    cursor: pointer !important;
                }

                .br-other {
                    color: #ccc;
                    cursor: text !important;
                }
            }
        }

        &-right {
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
            align-items: center;
            margin-right: 20px;

            &-action {
                margin-right: 20px;

                >span {
                    margin-right: 20px;
                }
            }

            &-user {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                flex-shrink: 0;
                cursor: pointer;

                &-face {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    margin-top: 3px;
                    margin-right: 5px;
                }
            }
        }
    }
}
</style>